<template>
  <div>
    <div class="top">
      <div class="top-log">妩翎衣服装后台管理</div>
      <div class="top-info">
        <div></div>
        <div @click="onSignOut">退出登录</div>
      </div>
    </div>
    <div class="below">
      <div class="sidebar">
        <el-aside style="width: 220px;">
          <el-menu
            class="el-menu-vertical-demo"
            :router="true"
            text-color="#000"
            active-text-color="#0dbd95"
          >
            <!-- <el-menu-item index="/home">
              <i class="el-icon-s-home"></i>
              <span slot="title">后台首页</span>
            </el-menu-item> -->
            <el-menu-item index="/home/user/index">
              <i class="el-icon-user"></i>
              <span slot="title">用户管理</span>
            </el-menu-item>

            <el-submenu index="/home/gallery">
              <template slot="title">
                <i class="el-icon-picture"></i>
                <span>女性服装</span>
              </template>
              <el-menu-item index="/home/gallery/index">女性服装管理</el-menu-item>
              <el-menu-item index="/home/gallery/type">类别管理</el-menu-item>
            </el-submenu>

            <el-submenu index="/home/meaty">
              <template slot="title">
                <i class="el-icon-s-data"></i>
                <span>男性服装</span>
              </template>
              <el-menu-item index="/home/meaty/index">男性服装管理</el-menu-item>
              <el-menu-item index="/home/meaty/type">类别管理</el-menu-item>
            </el-submenu>

            <el-menu-item index="/home/curing/index">
              <i class="el-icon-view"></i>
              <span slot="title">服装保养洗涤</span>
            </el-menu-item>

            <el-menu-item index="/home/information/index">
              <i class="el-icon-s-opportunity"></i>
              <span slot="title">新闻资讯</span>
            </el-menu-item>

            <!-- <el-menu-item index="/home/soil/index">
              <i class="el-icon-data-line"></i>
              <span slot="title">土壤知识</span>
            </el-menu-item> -->
            <el-submenu index="/home/system">
              <template slot="title">
                <i class="el-icon-s-tools"></i>
                <span>系统管理</span>
              </template>
              <el-menu-item index="/home/system/img">轮播图</el-menu-item>
              <el-menu-item index="/home/system/tail">尾部文字</el-menu-item>
            </el-submenu>
            <el-menu-item index="/home/personal/index">
              <i class="el-icon-s-custom"></i>
              <span slot="title">个人中心</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
      </div>
      <div class="page">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      admin: JSON.parse(localStorage.getItem("admin"))
    };
  },

  created() {},
  methods: {
    onSignOut() {
      let is = confirm(this.admin.name + "  管理员确认要退出吗！！！！");
      if (is) {
        localStorage.removeItem("admin");
        this.$router.push({ path: "/login" });
      }
    }
  }
};
</script>
<style>
.el-aside::-webkit-scrollbar {
  display: none;
}
.el-submenu__title:hover {
  background-color: rgba(13, 189, 149, 0.1) !important;
  color: rgb(255, 255, 255);
}

.el-menu-item:hover {
  background-color: rgb(13, 189, 149, 0.1) !important;
  color: rgb(255, 255, 255);
}
</style>
<style scoped>
.top {
  background: #0ec5a1;
  width: 100%;
  height: 8vh;
  display: flex;
  color: rgb(255, 255, 255);
  align-items: center;
}
.fixed {
  position: fixed;
  top: 0;
  z-index: 10;
}
.top-log {
  font-family: "FZShuTi";
  font-size: 38px;
  margin-left: 20px;
}
.below {
  display: flex;
  width: 100%;
  height: 92vh;
}
.top-info {
  margin-left: auto;
  margin-right: 20px;
  cursor: pointer;
}

.page {
  width: 100%;
  background-color: #f8f8f8;
  padding: 5px;
}
</style>